.bttn-fill
  {bttnBaseStyle}
  {bttnMdSize}
  z-index: 0
  border none
  background cWhite
  color cBlue;
  transition all 0.3s anim_func
  &:before
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: cBlue;
    content: ''
    opacity: 0;
    transition transform 0.15s ease-out, opacity 0.15s ease-out;
    z-index -1
    transform scaleX(0)
  &:hover, &:focus
    box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .7)
    color cWhite
    transition all 0.5s anim_func
    &:before
      opacity: 1
      transition transform 0.2s ease-in, opacity 0.2s ease-in
      transform scaleX(1)
  &.bttn-xs
    {bttnXsSize}
    &:hover, &:focus
      box-shadow 0 1px 4px cBlack - rgba(0, 0, 0, .7)
  &.bttn-sm
    {bttnSmSize}
    &:hover, &:focus
      box-shadow 0 1px 6px cBlack - rgba(0, 0, 0, .7)
  &.bttn-md
    {bttnMdSize}
    &:hover, &:focus
      box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .7)
  &.bttn-lg
    {bttnLgSize}
    &:hover, &:focus
      box-shadow 0 1px 10px cBlack - rgba(0, 0, 0, .7)
  &.bttn-default
    background cWhite
    color cBlue
    &:hover, &:focus
      color cWhite
    &:before
      background: cBlue;
  &.bttn-primary
    background cBlue
    color cWhite
    &:hover, &:focus
      color cBlue
    &:before
      background: cWhite;
  &.bttn-warning
    background cYellow
    color cWhite
    &:hover, &:focus
      color cYellow
    &:before
      background: cWhite;
  &.bttn-danger
    background cRedLight
    color cWhite
    &:hover, &:focus
      color cRedLight
    &:before
      background: cWhite;
  &.bttn-success
    background cGreen
    color cWhite
    &:hover, &:focus
      color cGreen
    &:before
      background: cWhite;
  &.bttn-royal
    background cPurple
    color cWhite
    &:hover, &:focus
      color cPurple
    &:before
      background: cWhite;